import React from 'react';
import LeftNav from '../../../../node_modules/material-ui/lib/left-nav';
import Divider from '../../../../node_modules/material-ui/lib/divider';
import TextField from 'material-ui/lib/TextField';
import RaisedButton from '../../../../node_modules/material-ui/lib/raised-button';
import Image from '../../../../node_modules/react-bootstrap/lib/Image';
import HttpRequest from './../HttpRequest.js';
var _ = require('lodash');


var SelectNavList = React.createClass({
    getInitialState: function () {
        return {
            open: false,
            selectedList: [],
            listItems: [],
            pro_dep:[]
        }
    },
    mouseOver:function(index){
       document.getElementById("goods_ordered_"+index).style.backgroundColor = "#ccc";
    },
    mouseOut:function(index){
       document.getElementById("goods_ordered_"+index).style.backgroundColor = "";
    },
    componentWillMount:function(cb){
        var ob = this;
        var list_items = [];
        var operation = null;
        if(this.props.current_project._id)
        HttpRequest.getProject(this.props.current_project._id).success(function(msg){
            if(msg.code != 500){
                ob.setState({
                    pro_dep:msg.data.dependencies
                });
                if (cb && typeof cb === 'function') {
                    cb(msg.data.dependencies);
                }
                if (ob.props.listData && ob.props.listData.length > 0) {
                    ob.props.listData.map((item, index) => {
                        if (_.findIndex(ob.state.pro_dep, {name: item.name}) < 0) {
                            list_items.push(
                                <div id={"goods_ordered_"+index}
                                     key = {index}
                                     className={"list_item"}
                                     style={{borderColor: "#9d9d9d",borderWidth: "1px",borderBottomStyle: "solid",paddingLeft:"0",opacity:"0.5",cursor:"pointer"}}
                                     onClick={function(){ob.dependencyOperation(item)}}
                                     onMouseOver={this.mouseOver.bind(this,index)}
                                     onMouseOut={this.mouseOut.bind(this,index)}
                                >
                                    <img src="/res/image/list.png" style={{marginRight:"10px"}}/>
                                    {item.goods_title}
                                </div>
                            )
                        }
                    });
                }
                ob.setState({
                    listItems: list_items
                });
            } else{
                console.log("获取依赖信息失败");
            }
        }.bind(this)).error(()=>{ console.log("获取依赖信息失败");});
    },
    itemSelected: function (item) {
        this.state.selectedList.push(item);
    },
    handleToggle: function () {
        this.componentWillMount();
        this.setState({open: !this.state.open});
    },
    dependencyOperation: function (item) {
        var ob = this;
            HttpRequest.addDependency(this.props.current_project._id, item).success(function (msg) {
                if (msg.code != 500) {
                    toastr.success(null, "依赖已添加");
                    ob.componentWillMount(function (dependencies) {
                        ob.props.callback(dependencies);
                    });
                } else {
                    toastr.error(null, "发生错误，依赖添加失败");
                }
            }).error(function (msg) {
                toastr.error(null, "发生错误，依赖添加失败");
            });
    },
    render(){
        return (
            <LeftNav  openRight={true} docked={false} open={this.state.open}
                     onRequestChange={open => this.setState({open})} style={{width:"20%", backgroundColor:"#EDEDED",overflowY:"auto" }} >
                <p style={{padding: "20px 10px", fontSize:"20px"}}><i style={{marginRight: "10px"}}
                                                                      className="fa fa-list-ul"
                                                                      ariaHidden="true"/><strong>已订阅产品</strong>
                </p>
                <div style={{margin:"0 20px"}}>
                    {this.state.listItems}
                </div>

               <div style={{position:"absolute",top:"90%"}}>
                  <a href="http://store.beecode.cn" target="_Blank" style={{color:"#969696",paddingLeft:"50px",fontSize:"14px",fontFamily:'Microsoft YaHei'}}> 前往store获取更多...</a>
               </div>

            </LeftNav>
        )
    }
});
module.exports = SelectNavList;